<!-- 充值 -->
<template>
  <view class="recharge-container">
    <view class="my-money">
      <view class="text">
        我的余额
      </view>
      <view class="money-box">
        ￥0.00
      </view>
    </view>
    <!-- 充值金额选择 -->
    <view class="money-select">
      <text>充值数量</text>
      <view class="money-list">
        <template v-for="(money, index) in moneys" :key="index">
          <view @click="onSelect(index)" class="money-item" :class="{ selected: state.selectIndex == index }">{{ money }}</view>
        </template>
      </view>
      
      <view class="money-input">
        <uni-easyinput @focus="onFocus" type="number" confirmType="done" v-model="state.money" placeholder="请输入充值数量"></uni-easyinput>
      </view>
    </view>
    <!-- 支付方式 -->
    <view class="payment-type">
      <text>支付方式</text>
      <radio-group @change="onRadioChange">
        <label class="uni-list-cell uni-list-cell-pd payment-item" v-for="(item, index) in payments" :key="item.value">
          <view class="logo">
            <text class="iconfont">&#xe63f;</text>
          </view>
          <view class="name">{{item.name}}</view>
          <view>
            <radio :value="item.value" :checked="state.payment == item.value" />
          </view>
        </label>
      </radio-group>
    </view>
    
    <!-- 按钮 -->
    <view class="btn-box">
      <button type="warn">立即充值</button>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  name: "Recharge",
  setup() {
    const state = reactive({
      money: null,
      selectIndex: null,
      payment: "wechat"
    });
    const moneys = ref([3, 10, 50, 100, 200, 300, 500, 800]);
    const payments = ref([
      {value: "wechat", name: "微信支付", checked: true}
    ]);
    const extraIcon = reactive({
      color: '#4cd964',
      size: '22',
      type: 'gear-filled'
    });
    
    const onSelect = (index) => {
      state.selectIndex = index;
      state.money = moneys.value[index] || 0;
    }
    
    const onFocus = () => {
      state.selectIndex = null;
    }
    
    const onRadioChange = (ev) => {
      state.payment = ev.detail.value;
    }
    
    return {
      state,
      moneys,
      payments,
      extraIcon,
      onSelect,
      onFocus,
      onRadioChange
    }
  }
});
</script>

<style scoped lang="scss">
$c: #F34D37;

.my-money {
  background-color: $c;
  padding: 60rpx 0 80rpx 60rpx;
  
  .text {
    font-size: 24rpx;
    color: #fff;
    margin-bottom: 30rpx;
  }
  
  .money-box {
    font-size: 40rpx;
    color: #fff;
    font-weight: bold;
  }
}

.money-select {
  padding: 0 60rpx;
  margin-top: 40rpx;
  
  > text {
    margin-bottom: 20rpx;
    display: inline-block;
  }
  
  .money-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40rpx;
    
    .money-item {
      width: 138rpx;
      height: 70rpx;
      background-color: #EEEEEE;
      border: 1px solid #999999;
      border-radius: 8rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:nth-child(4n) {
        margin-right: 0;
      }
      
      &.selected {
        background-color: $c;
        color: #fff;
        border-color: $c;
      }
    }
  }
}

.payment-type {
  padding: 0 60rpx;
  margin-top: 60rpx;
  
  > text {    margin-bottom: 40rpx;    display: inline-block;  }
  
  .payment-item {
    display: flex;
    align-items: center;
    
    .logo {
      border-radius: 50%;
      background-color: #4EA209;
      width: 60rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      
      text {
        font-size: 40rpx;
        color: #fff;
      }
    }
    
    .name {
      flex: 1;
      margin: 0 20rpx;
      font-size: 36rpx;
    }
  }
}

.btn-box {
  padding: 0 60rpx;
  margin-top: 80rpx;
  
  button {
    border-radius: 60rpx;
  }
}

</style>